<template>
  <div class="text-center">
    <div class="text-lg mb-2">重设密码</div>
    <div class="max-w-[450px] w-4/5 mx-auto">
      <a-input-group compact>
        <a-select class=" !mb-2" size="large" v-model:value="info.area" style="width: 30%">
          <a-select-option :value="86">+86</a-select-option>
          <a-select-option :value="852">+852</a-select-option>
          <a-select-option :value="65">+65</a-select-option>
        </a-select>
        <a-input size="large" v-model:value.trim="info.phone" style="width: 70%" />
      </a-input-group>
      <a-input-search class=" !mb-2" v-model:value.trim="info.verify_code" placeholder="短信验证码" size="large"
        @search="getCode">
        <template #enterButton>
          <a-button :disabled="smsInfo.allowSend" class="!bg-base !text-white outline-none">
            {{ !smsInfo.allowSend ? "获取验证码" : `${smsInfo.time}重新获取` }}
          </a-button>
        </template>
      </a-input-search>
      <a-input-password :disabled="allowRegister" class=" !mb-2" size="large" v-model:value.trim="info.password"
        placeholder="请输入您的新密码" />
      <a-input-password :disabled="allowRegister" class=" !mb-2" size="large" v-model:value.trim="info.repassword"
        placeholder="请重复您的新密码" />
      <button :disabled="allowRegister" @click="submit"
        class="bg-base text-white outline-none !my-6 w-full disabled:bg-bg-purple-100">提交</button>
      <div>已经注册过账号？请<a class="ml-1" @click="emits('setType', 'accout')">登录</a></div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { reset_pwd, send_forget_pwd_verify_code } from '@/request/api'
import { message } from 'ant-design-vue'
const emits = defineEmits(['setType'])
const info = reactive<{
  area: number | string
  phone: string
  password: string
  repassword: string
  verify_code: string
}>({
  area: 86,
  phone: '',
  password: '',
  repassword: '',
  verify_code: '',
})
const smsInfo = reactive({
  allowSend: false,
  time: 59,
})
let allowRegister = ref<boolean>(false)
const getCode = () => {
  if (
    !/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
      info.phone.trim()
    )
  ) {
    message.error('手机号码格式不正确，请确认后再发送！')
  } else {
    smsInfo.allowSend = true
    send_forget_pwd_verify_code({ phone: info.phone }).then((res) => {
      if (res.code == 200) {
        message.success('发送成功！')
        const interVal = setInterval(() => {
          if (smsInfo.time > 0) {
            smsInfo.time--
          } else {
            smsInfo.allowSend = false
            smsInfo.time = 59
            clearInterval(interVal)
          }
        }, 1000)
      } else {
        smsInfo.allowSend = false
      }
    })
  }
}
const submit = () => {
  if (
    !/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
      info.phone.trim()
    )
  ) {
    message.error('手机号码不正确，请确认后再发送！')
  } else if (/^d{4}$/.test(info.verify_code.trim())) {
    message.error('验证码不正确，请确认后再发送！')
  } else if (!info.password.trim()) {
    message.error('密码不能为空！')
  } else if (info.repassword !== info.password) {
    message.error('两次密码输入不一致')
  } else {
    reset_pwd({
      password: info.password,
      verify_code: info.verify_code,
      phone: info.phone
    }).then((res) => {
      if (res.code == 200) {
        message.success('重置成功，请返回重新登陆！')
        emits('setType', 'accout')
      }
    })
  }
}
</script>